包容性設計(指南)
App Store 已發展成一個每週服務五億訪問者,全球175個地區、40種語言。這意味著它容易學習,感覺自然,並且使用愉快。好用並不是唯一的重要目標。另一個重要的方面是你的應用程式或遊戲對來自不同背景和觀點的人們表示歡迎和尊重。
/Untitled.png)
內容是你與受眾交流的語言。“內容”定義為設計中的文字、影象、音訊和影片,它也是你讓人們展現自己的方式。
/Untitled 1.png)
/Untitled 2.png)
六個可以讓你的應用程式或遊戲更具包容性的具體實踐:
Tell diverse stories 講述多樣化的故事
使用你應用程式或遊戲的人會有各種各樣的背景和經歷。主要表達內容的多樣化,避免本地化,個人化。
當你設定你的 App Store 頁面時,要講多樣化的故事。不要只放那些最先想到的名字和場景,要深入挖掘,找到不常講的故事。
A 透過網頁或應用程式在 App Store 上的頁面來體現。
由從自身出發你很容易從你熟悉的事物內容的表達轉變為更加包容和多元化的內容,讓更多人接受和喜歡。
最佳化前:一群人在劃獨木舟時的歡樂時光包容性更強。
最佳化後:描繪了一群更為多樣化的人在進行社群服務活動的照片。
/Untitled 3.png)
/Untitled 4.png)
最佳化前:一些美國人平凡的一天的待辦事項,如回電給最好的約翰朋友,然後為生日派對購物,讀一本書,然後練習樂器。
最佳化後:不再是給約翰回電話,而是給阿比回電話(“阿比”是一個常見的印度名字,展示文化多樣性。)
不是為晚餐購物,而是計劃排燈節,這個節日有十多億人慶祝。(“排燈節”是印度教的重要節日,展示文化多樣性。)
至於書,可以選擇一個較不知名的作家,(“欽努阿·阿契貝”是一位奈及利亞作家,展示文學多樣性。)
至於練習的活動,可以是手語,這有助於促進對聾啞群體的包容。
/Untitled 5.png)
/Untitled 6.png)
最佳化前:煎餅、披薩、漢堡美國人最熟悉的事物。
最佳化後:新增一些能夠反映其他文化的食物可。
/Untitled 7.png)
/Untitled 8.png)
總結:雖然仍然是在講述某人需要一個應用程式來跟蹤各種任務的故事,但我們已經使一些內容更加貼近不同多樣性軸線上的更多人。
Avoid stereotypes 避免刻板印象
刻板印象是對人群的過於簡化的看法。事實上,我們所有人都有這些型別的信念,通常我們甚至沒有意識到它們的存在。如果不注意刻板印象如何影響你的應用程式或遊戲的設計,你可能會在無意識中透過內容和功能將人們排除在外。
/Untitled 9.png)
最佳化前:男性和女性兩種性別的刻板印象,在文案中使用“他”或“她”
最佳化後:人類性別的多樣性,用性別中立的代詞“他們”代替。
/Untitled 10.png)
/Untitled 11.png)
影片內容中用“大家好”代替“男士們好”
/Untitled 12.png)
/Untitled 13.png)
最佳化前:一個新的個人資料佔位符圖示使用了刻板印象中的男性頭像。
最佳化後:一個無性別的人類圖示
/Untitled 14.png)
/Untitled 15.png)
SFSymbols 提供了許多這樣的性別中立的圖示,你可以在你的應用程式和遊戲中使用。
/Untitled 16.png)
避免透過無意中使用歧視殘障人士的語言來撰寫文案,可能不經意間出現在你的文案中。
“Keep your to-do list from going insane”:nsane”(瘋狂)。這種表達可能適用於更加熟悉英語幽默和習慣誇張表達方式的使用者群體,但對於那些對精神健康問題比較敏感的使用者群體則可能不太合適。
“Achieve ridiculously fast speeds”:這種表達適用於更廣泛的使用者群體,不管他們的文化背景或者個人經歷如何,都比較容易接受這種誇張而不失幽默的說法。
/Untitled 17.png)
/Untitled 18.png)
這些並不是說你應該完全避免在內容中提及殘障,而是避免在語言中暗示殘障意味著某種程度上的不足。實際上,承認並強化對殘障人士的代表性是一個好主意。
/Untitled 19.png)
最佳化前:允許家庭管理誰可以訪問共享電影庫的應用程式,將家庭成員劃分為父親、母親和孩子的角色。
在這種情況下,我的應用程式對家庭的理解沒有考慮到家庭可能是單親、同性父母、多代同堂、成年子女和法定監護人等不同形式。
最佳化後:以將每個個人資料標記為中性的,比如“家庭成員”。
/Untitled 20.png)
/Untitled 21.png)
Adopt accessibility 採用無障礙設計
不要一開始就假設殘障人士不會想使用你的應用程式或遊戲。從盲人或視力低下的人,聾人或聽力受損的人,對運動敏感的人,到有身體或運動障礙的人,全球有數億人至少使用一種無障礙設定。
你可以做些什麼來確保你的應用程式是無障礙的呢?
A text and type 文字和字型
iOS 支援多種字型大小偏好,應用程式佈局應該能夠靈活且自動地適應。儘量確保你的應用程式在各種字型大小範圍內都能清晰可讀。
/Untitled 22.png)
如果使用你的應用程式的人開啟了粗體文字功能,請確保那些雖然不是文字但可能會影響可讀性的元素也變粗。比如這些圓圈設計也需要相應更粗樣式
/Untitled 23.png)
/Untitled 24.png)
B VoiceOver 是一種螢幕閱讀器,它讓人們無需看螢幕就能使用介面。
對於盲人來說,VoiceOver 是絕對重要的,但它也對其他有理由不看螢幕的人有幫助,比如坐公交車時看裝置可能會暈車的人。
預設情況下,VoiceOver 會按照邏輯順序遍歷介面元素,並獲取嵌入在系統標準控制元件中的資訊。關注 VoiceOver 的順序。這個應用程式在螢幕底部有一個顯著的“釋出”按鈕,放在那裡是為了便於訪問。同時也會被優先讀取。
C Testing 測試。將VoiceOver、增加對比度、減少透明度、減少運動和灰度濾色器新增到無障礙快捷選單。
/Untitled 25.png)
文字大小切換,可以將其新增到控制中心。
/Untitled 26.png)
嘗試在灰度模式下體驗你的應用程式或遊戲,以瞭解你對顏色的依賴程度以及應用程式的顏色對比度有多強。
/Untitled 27.png)
嘗試在沒有聲音的情況下體驗你的應用程式或遊戲,以瞭解你的應用程式對音訊的依賴程度。
/Untitled 28.png)
從不同的角度看待你的應用程式或遊戲的使用方式。QuickPath 滑動鍵盤,最初發明它是為了幫助那些手指靈活性不足,無法像其他人一樣快速打字的人。結果是,許多人喜歡這種打字方式。一個為某一群體的挑戰提供的解決方案,最終幫助了更多更多的人。
Localize for culture 文化本地化。
A 擴大你的應用程式或遊戲的覆蓋範圍的重要一步是將其翻譯成不同的語言。據估計,世界上大約50%人說不止一種語言。翻譯的關鍵在於準備你的介面,使其能夠處理不同的詞長和書寫系統。
/Untitled 29.png)
/Untitled 30.png)
配音和翻譯影片中的字幕。
/Untitled 31.png)
格式化單位,例如時間、電話號碼和貨幣。
/Untitled 32.png)
/Untitled 33.png)
/Untitled 34.png)
B 使內容更貼近不同文化。
仔細檢查你是否使用了只有特定人群才懂的短語,以使來自其他文化的人感到受歡迎。
成語、俚語和幽默之類的語言在實現包容性時可能很難處理。比如成語“九牛一毛。”字面意思不同於實際含義的短語。如果我要把這個轉換成一個英文成語,你可能會認作“a drop in the bucket桶中的一滴水”,意思是“極小的量”。
/Untitled 35.png)
/Untitled 36.png)
/Untitled 37.png)
儘量使用簡單、直接的語言,避免隱喻和複雜的術語。應用程式文案中寫道“從 A 到 Z 計劃你的假期”,“從 A 到 Z”是無法翻譯成韓語的。簡單地改為“從頭到尾計劃你的假期”。會好很多。
/Untitled 38.png)
/Untitled 39.png)
Apple關於包容性的文件
https://developer.apple.com/design/human-interface-guidelines/inclusion/
C 考慮你的內容是否尊重不同的文化規範和習俗。比如,我剛剛在美國推出了一款烹飪應用程式,彙集了自制披薩、烤雞和熱狗等受歡迎的食譜。
/Untitled 40.png)
將介面翻譯成印地語,是不夠的。因為在印度,大部分人口是素食者,並信奉印度教,在那裡牛被尊崇,吃牛肉很不常見,有時甚至被禁止。推薦牛肉和香腸這樣的食物可能會顯得對當地文化不敏感。
/Untitled 41.png)
根據當地的飲食習慣調整我的應用程式內容,研究更符合當地口味的菜餚和更廣泛可用的食材。還可以利用這個機會識別文化時刻,比如展示當地節日期間通常食用的食譜。
/Untitled 42.png)
/Untitled 43.png)
D 在遊戲中,如果你有受真實人物和地點啟發的角色和環境,尊重其他文化就變得很重要。避免將不同文化刻畫成漫畫式的形象。
/Untitled 44.png)
Use color mindfully 謹慎使用顏色。
A 顏色引發情感,而這些情感在不同文化中可能會有所不同。
在許多西方國家,綠色可以象徵環保和綠色行動,或者在西方國家,綠色也可以象徵幸運、財富或命運。
在世界的許多地方,紅色可以與愛情和紅玫瑰聯絡在一起。或者紅色可以與危險、消極甚至暴力聯絡在一起。
/Untitled 45.png)
/Untitled 46.png)
股票顯示漲為綠色,跌為紅色,但如果你將地區設定為中國大陸,漲則顯示為紅色。
/Untitled 47.png)
B 考慮到色盲。色盲影響著世界上近5%的人口,確保介面元素不只是依靠顏色來傳達資訊。
/Untitled 48.png)
比如這裡有兩種點來表示“未讀”和“標記”。但色盲的人可能無法僅透過顏色輕鬆區分這兩種點。將其中一個點換成符號會一目瞭然。
/Untitled 49.png)
/Untitled 50.png)
C 注意文字和背景之間的對比度。 iOS 調色盤實際上包含一組額外的顏色來支援高對比度模式。
/Untitled 51.png)
如果你的應用程式是自定義顏色,你需要使用網上或應用商店中的工具來計算背景和文字之間的亮度比。介面的最低對比度應達到 4.5:1。
/Untitled 52.png)
/Untitled 53.png)
/Untitled 54.png)
但有些情況下,這個比率會產生誤導,你需要自行判斷。例如,這種顏色組合也超過了 4.5 的標準,但在實際情況下仍然難以閱讀。調整之後會好些。所以要調整好對比度需要藝術與科學互相結合。
/Untitled 55.png)
/Untitled 56.png)
D 在不同的光照條件、色彩濾鏡和各種裝置上測試你的設計。
E “無顏色區分”(Differentiate Without Color)功能。“無顏色區分”是為了幫助色盲或視覺受限的使用者更好地辨別資訊,它透過在顏色基礎上新增其他視覺提示,使介面更易於理解。
/Untitled 57.png)
以花生醬應用程式為例,當我發現使用者啟用了“無顏色區分”功能時,我就會把原來的圓圈替換成綠色對勾、黃色問號和紅色X符號。這樣,即使應用介面是這種樣子,我們仍然可以區分不同花生醬的狀態。
/Untitled 58.png)
/Untitled 59.png)
《因果》這款遊戲。遊戲玩法其實是透過螢幕上的顏色來表現的,但這對所有玩家來說可能資訊不足,所以開發者提供了一個色盲模式,你可以看到現在的樣子。啟用該模式後,玩家和目標的頭上會出現符號標誌,與其身份相關聯。
/Untitled 60.png)
/Untitled 61.png)
/Untitled 62.png)
Encourage self-expression 鼓勵自我表達。
設計尊重身份的介面。
/Untitled 63.png)
當使用者能在產品中找到與自身相關的元素,會感覺到更有歸屬感。
/Untitled 64.png)
A 支援多種字元和書寫系統,以便人們的名字可以被準確地表示。
不要限制文字字數,支援輸入emoji來更好的表達自己,支援各種字元
/Untitled 65.png)
不同文化中的姓氏和名字也不一樣,拉丁美洲一般有兩個家族姓氏,中國有一個在前面,馬來西亞和阿富汗則沒有姓氏。
/Untitled 66.png)
一欄可以讓使用者填寫全名,而另外一欄可以讓使用者填寫暱稱或你最喜歡的被稱呼的名字。
/Untitled 67.png)
B 在性別的選擇上也要考慮到多元性
約會應用 Bumble 是一個展示性別選擇的好例子。在註冊時,你可以從廣泛的性別選項中選擇,並且可以提交你自己的性別。
/Untitled 68.png)
/Untitled 69.png)
你還可以選擇將性別公開或私密,並且隨時可以更改。這樣的介面承認了多樣性,使更多人感到受歡迎。
/Untitled 70.png)
C 允許使用者上傳自己的個人資料照片或從多樣化的頭像中選擇,
/Untitled 71.png)
運動敏感性相關功能
運動敏感性影響了三分之一的人群,對部分高敏感度的使用者來說,這些效果可能會引發不適或焦慮。
/Untitled 72.png)
A 減少動態效果設定:iOS 在輔助功能中提供了減少動態效果的選項,可以禁用系統中的某些動畫(如天氣效果和視差效果)。開發者應確保他們的應用程式能夠適應這一設定,在啟用時減少或修改動畫效果。
/Untitled 73.png)
/Untitled 74.png)
B 自動播放影片:自動播放影片(例如 App Store 中的遊戲預告片)可能會吸引一些使用者,但對其他使用者來說,可能會帶來不適感。iOS 13 引入了一個可以禁用自動播放影片預覽的設定,使用者可以根據個人偏好決定是否自動播放影片。開發者應尊重這一設定,為影片提供播放/暫停選項,並監測使用者偏好的變化。
C 螢幕過渡效果:螢幕過渡效果(如側滑切換)是 iOS 中的另一種運動形式。iOS 現在在減少動態效果設定中增加了一個偏好交叉淡入淡出過渡的選項,將側滑效果替換為更為柔和的淡入淡出效果。
/Untitled 75.png)
/image.png)